<script setup>
import { ref } from 'vue'

const teamMembers = ref([
  {
    name: '张伟',
    position: '首席执行官',
    bio: '张伟拥有10年游戏开发经验，曾主导多款成功的VR游戏项目。他的愿景是创造最具沉浸感的虚拟体验，让玩家忘记他们正在玩游戏。',
    avatar: '/images/team/ceo.jpg',
  },
  {
    name: '李娜',
    position: '创意总监',
    bio: '李娜曾在多家国际游戏工作室担任创意职位。她擅长开发引人入胜的游戏叙事和角色，为我们的游戏赋予了灵魂和情感深度。',
    avatar: '/images/team/creative.jpg',
  },
  {
    name: '王强',
    position: '技术总监',
    bio: '王强是一位VR技术专家，拥有计算机图形学博士学位。他领导我们的技术团队开发专有技术，突破VR游戏的界限。',
    avatar: '/images/team/cto.jpg',
  },
  {
    name: '刘芳',
    position: '艺术总监',
    bio: '刘芳拥有超过8年的游戏艺术设计经验。她对细节的关注和对创造美丽而功能性环境的热情，使我们的游戏视觉效果无与伦比。',
    avatar: '/images/team/art.jpg',
  },
  {
    name: '赵明',
    position: '音频总监',
    bio: '赵明是一位才华横溢的作曲家和音响设计师，专注于为VR创造沉浸式音频体验。他的工作为游戏添加了令人惊叹的听觉维度。',
    avatar: '/images/team/audio.jpg',
  },
  {
    name: '陈静',
    position: 'VR交互设计师',
    bio: '陈静是一位经验丰富的VR交互设计专家，专注于创造直观且沉浸式的用户体验。她的创新设计理念使我们的VR游戏交互更加自然流畅。',
    avatar: '/images/team/design.jpg',
  },
])

const faqs = ref([
  {
    question: '你们的VR游戏支持哪些平台？',
    answer:
      '我们的游戏支持所有主流VR平台，包括Oculus Quest、HTC Vive、Valve Index和PlayStation VR。',
  },
  {
    question: '游戏是否提供多语言支持？',
    answer: '是的，我们的游戏目前支持中文、英语、日语、韩语、法语、德语和西班牙语。',
  },
  {
    question: '游戏是否支持多人模式？',
    answer: '是的，我们的游戏提供多人在线模式，支持最多8名玩家同时在同一虚拟环境中互动。',
  },
  {
    question: '你们如何处理VR晕动症问题？',
    answer:
      '我们采用了多项减轻VR晕动症的技术，包括平滑移动、视场调整选项，以及渐进式VR适应训练模式。',
  },
  {
    question: '你们如何保护用户的隐私和数据？',
    answer:
      '我们严格遵守数据保护法规，只收集必要的游戏数据，并且所有用户数据都经过加密处理。我们永远不会未经许可分享您的个人信息。',
  },
])
</script>

<template>
  <div class="about">
    <div class="about-hero">
      <div class="cyber-grid"></div>
      <div class="vr-overlay"></div>
      <h1
        class="vr-mega-title vr-hologram-title animate__animated animate__fadeIn"
        data-text="关于我们"
      >
        关于<span class="highlight">我们</span>
        <span class="glitch-layer">关于我们</span>
        <span class="glitch-layer">关于我们</span>
        <div class="digital-noise"></div>
      </h1>
      <p class="cyber-subtitle animate__animated animate__fadeIn animation-delay-1">
        认识打造VR游戏的精英团队
      </p>
      <div class="tech-decoration">
        <div class="tech-circle"></div>
        <div class="tech-line"></div>
      </div>
    </div>

    <div class="company-intro">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><Aim /></el-icon>
          </div>
          <h2 class="vr-mega-title vr-floating-title" data-text="我们的使命">
            我们的<span class="highlight">使命</span>
            <span class="glitch-layer">我们的使命</span>
            <span class="glitch-layer">我们的使命</span>
          </h2>
        </div>
        <div class="mission-card animate__animated animate__fadeInUp animation-delay-1" v-intersect>
          <div class="mission-content">
            <p class="mission-statement">
              我们致力于创造最具创新性和沉浸感的VR游戏体验，将玩家带入前所未有的虚拟世界。
              我们相信游戏不仅仅是娱乐，更是艺术、技术与想象力的完美结合。
              在这个快速发展的VR世界中，我们不断探索新技术的边界，塑造未来的游戏方式。
            </p>
            <div class="mission-stats">
              <div class="stat-item">
                <div class="stat-value">7+</div>
                <div class="stat-label">年VR经验</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">15+</div>
                <div class="stat-label">VR游戏作品</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">50+</div>
                <div class="stat-label">行业奖项</div>
              </div>
            </div>
          </div>
          <div class="hologram-effect"></div>
        </div>
      </div>
      <div class="tech-particles">
        <div class="particle p1"></div>
        <div class="particle p2"></div>
        <div class="particle p3"></div>
        <div class="particle p4"></div>
        <div class="particle p5"></div>
        <div class="particle p6"></div>
      </div>
    </div>

    <div class="team-section">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><UserFilled /></el-icon>
          </div>
          <h2 class="vr-mega-title vr-hologram-title" data-text="精英团队">
            精英<span class="highlight">团队</span>
            <span class="glitch-layer">精英团队</span>
            <span class="glitch-layer">精英团队</span>
            <div class="digital-noise"></div>
          </h2>
          <p class="section-subtitle">汇聚VR游戏领域的顶尖人才</p>
        </div>

        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="8" v-for="member in teamMembers" :key="member.name">
            <div class="team-card-container animate__animated animate__fadeIn" v-intersect>
              <div class="team-card">
                <div class="card-inner">
                  <div class="card-front">
                    <div class="avatar-container">
                      <div class="avatar-frame"></div>
                      <el-avatar :size="120" :src="member.avatar">
                        <el-icon><User /></el-icon>
                      </el-avatar>
                      <div class="tech-glow"></div>
                    </div>
                    <h3>{{ member.name }}</h3>
                    <p class="position">{{ member.position }}</p>
                    <div class="card-connector"></div>
                  </div>
                  <div class="card-back">
                    <p class="bio">{{ member.bio }}</p>
                    <div class="tech-corner top-left"></div>
                    <div class="tech-corner top-right"></div>
                    <div class="tech-corner bottom-left"></div>
                    <div class="tech-corner bottom-right"></div>
                  </div>
                </div>
              </div>
              <div class="card-shadow"></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="tech-grid-bg"></div>
    </div>

    <div class="faq-section">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><QuestionFilled /></el-icon>
          </div>
          <h2 class="vr-mega-title vr-floating-title" data-text="常见问题">
            常见<span class="highlight">问题</span>
            <span class="glitch-layer">常见问题</span>
            <span class="glitch-layer">常见问题</span>
          </h2>
        </div>

        <div class="faq-container">
          <el-collapse accordion class="cyber-collapse">
            <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question">
              <div class="faq-answer">
                <div class="answer-marker">A:</div>
                <p>{{ faq.answer }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>

        <div class="faq-decoration">
          <div class="tech-circuit"></div>
        </div>
      </div>
    </div>

    <div class="contact-section">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><Message /></el-icon>
          </div>
          <h2 class="section-title">联系<span class="highlight">我们</span></h2>
        </div>

        <el-row :gutter="30">
          <el-col :xs="24" :md="12">
            <div class="contact-info animate__animated animate__fadeInLeft" v-intersect>
              <div class="info-card">
                <h3>联系信息</h3>
                <ul class="info-list">
                  <li>
                    <el-icon><Location /></el-icon>
                    <span>地址：翻斗大街翻斗花园10号楼1001室</span>
                  </li>
                  <li>
                    <el-icon><Phone /></el-icon>
                    <span>电话：+10086</span>
                  </li>
                  <li>
                    <el-icon><Message /></el-icon>
                    <span>邮箱：495102569@qq.com</span>
                  </li>
                  <li>
                    <el-icon><Service /></el-icon>
                    <span>客服：周一至周五 9:00-18:00</span>
                  </li>
                </ul>
                <div class="social-media">
                  <h4>关注我们</h4>
                  <div class="social-icons">
                    <el-button class="cyber-button" circle>
                      <el-icon><Connection /></el-icon>
                    </el-button>
                    <el-button class="cyber-button" circle>
                      <el-icon><VideoCamera /></el-icon>
                    </el-button>
                    <el-button class="cyber-button" circle>
                      <el-icon><ChatDotSquare /></el-icon>
                    </el-button>
                    <el-button class="cyber-button" circle>
                      <el-icon><Share /></el-icon>
                    </el-button>
                  </div>
                </div>
                <div class="tech-decoration">
                  <div class="corner-decor top-left"></div>
                  <div class="corner-decor top-right"></div>
                  <div class="corner-decor bottom-left"></div>
                  <div class="corner-decor bottom-right"></div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :md="12">
            <div class="contact-form animate__animated animate__fadeInRight" v-intersect>
              <div class="form-card">
                <h3>发送消息</h3>
                <el-form>
                  <el-form-item>
                    <el-input class="cyber-input" placeholder="您的姓名" />
                  </el-form-item>
                  <el-form-item>
                    <el-input class="cyber-input" placeholder="您的邮箱" />
                  </el-form-item>
                  <el-form-item>
                    <el-input class="cyber-input" placeholder="主题" />
                  </el-form-item>
                  <el-form-item>
                    <el-input class="cyber-input" type="textarea" rows="4" placeholder="您的消息" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" class="submit-button">
                      <span class="button-text">发送消息</span>
                      <span class="button-icon"
                        ><el-icon><Right /></el-icon
                      ></span>
                    </el-button>
                  </el-form-item>
                </el-form>
                <div class="form-glow"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="contact-bg-circuit"></div>
    </div>
  </div>
</template>

<style scoped>
.about {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  overflow: hidden;
}

.about-hero {
  height: 50vh;
  background-image: url('https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  animation: grid-move 15s linear infinite;
  opacity: 0.3;
  z-index: 2;
}

/* Added laser beams effect */
.about::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 195, 255, 0.05) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 0, 255, 0.03) 50%, transparent 100%);
  background-size:
    200% 200%,
    100% 200%;
  animation: laser-beam 10s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes laser-beam {
  0% {
    background-position:
      0% 0%,
      0% 0%;
  }
  100% {
    background-position:
      200% 0%,
      0% 200%;
  }
}

/* Digital Circuit Lines */
.about::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path fill="none" stroke="rgba(0, 255, 255, 0.05)" stroke-width="1" d="M50,50 L50,150 L150,150 L150,250 L100,250 L100,300 L200,300 L200,200 L250,200 L250,400 L150,400 L150,450 L400,450 L400,100 L350,100 L350,50 Z"/></svg>');
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

.vr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
  z-index: 1;
}

.vr-mega-title {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 195, 255, 0.8);
  position: relative;
  z-index: 3;
}

.cyber-subtitle {
  font-size: 1.5rem;
  color: #a9c2ff;
  max-width: 700px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}

.highlight {
  color: #00c3ff;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
}

/* Enhanced glow effect for highlight */
.highlight {
  animation: neon-pulse 2s infinite alternate;
}

@keyframes neon-pulse {
  0% {
    text-shadow:
      0 0 5px rgba(0, 195, 255, 0.5),
      0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    text-shadow:
      0 0 10px rgba(0, 195, 255, 0.8),
      0 0 20px rgba(0, 195, 255, 0.5),
      0 0 30px rgba(0, 195, 255, 0.3);
  }
}

.tech-decoration {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.tech-circle {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(0, 195, 255, 0.5);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  animation: pulse 3s infinite;
}

.tech-line {
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, rgba(0, 195, 255, 0.8), transparent);
  margin: 0 auto;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 195, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 195, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 195, 255, 0);
  }
}

.animation-delay-1 {
  animation-delay: 0.3s;
}

.animation-delay-2 {
  animation-delay: 0.6s;
}

.animation-delay-3 {
  animation-delay: 0.9s;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.tech-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.tech-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.3);
  border: 1px solid rgba(0, 195, 255, 0.3);
  font-size: 24px;
  color: #00c3ff;
  /* Enhanced icon glow */
  animation: icon-pulse 3s infinite alternate;
}

@keyframes icon-pulse {
  0% {
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 25px rgba(0, 195, 255, 0.7);
  }
}

.section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

.section-subtitle {
  text-align: center;
  color: #a9c2ff;
  font-size: 1.2rem;
  margin-top: -10px;
  margin-bottom: 30px;
}

.company-intro {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
  overflow: hidden;
}

/* Added cyber circuit lines */
.company-intro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000"><path fill="none" stroke="rgba(170, 0, 255, 0.05)" stroke-width="2" d="M0,200 L200,200 C250,200 250,150 300,150 L500,150 C550,150 550,100 600,100 L1000,100 M0,400 L200,400 C250,400 250,450 300,450 L500,450 C550,450 550,500 600,500 L1000,500"/></svg>');
  background-size: cover;
  opacity: 0.3;
  z-index: 1;
}

.mission-card {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 195, 255, 0.2);
}

/* Enhanced mission card with animated border */
.mission-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 195, 255, 0.2),
    rgba(170, 0, 255, 0.2),
    transparent
  );
  background-size: 400% 100%;
  animation: border-flow 6s linear infinite;
  z-index: -1;
  border-radius: 15px;
}

@keyframes border-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 0%;
  }
}

.mission-content {
  position: relative;
  z-index: 2;
}

.mission-statement {
  font-size: 1.2rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

.mission-stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 30px;
}

.stat-item {
  text-align: center;
  padding: 0 20px;
}

/* Enhanced stat value with pulsing glow */
.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00c3ff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  margin-bottom: 5px;
  animation: stat-pulse 3s infinite alternate;
}

@keyframes stat-pulse {
  0% {
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    text-shadow:
      0 0 20px rgba(0, 195, 255, 0.8),
      0 0 30px rgba(0, 195, 255, 0.4);
  }
}

.stat-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.hologram-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(0, 195, 255, 0.05), transparent);
  background-size: 200% 200%;
  animation: hologram 8s ease infinite;
  pointer-events: none;
}

@keyframes hologram {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Enhanced particle effect with more particles */
.tech-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: rgba(0, 195, 255, 0.7);
  border-radius: 50%;
  filter: blur(2px);
  animation: float-up 15s infinite linear;
}

.p1 {
  left: 20%;
  top: 80%;
  animation-duration: 15s;
  animation-delay: 0s;
}

.p2 {
  left: 60%;
  top: 70%;
  animation-duration: 20s;
  animation-delay: 5s;
}

.p3 {
  left: 80%;
  top: 90%;
  animation-duration: 18s;
  animation-delay: 2s;
}

/* Added more particles */
.p4 {
  left: 30%;
  top: 85%;
  animation-duration: 17s;
  animation-delay: 1s;
  width: 3px;
  height: 3px;
  background-color: rgba(170, 0, 255, 0.7);
}

.p5 {
  left: 70%;
  top: 75%;
  animation-duration: 22s;
  animation-delay: 3s;
  width: 4px;
  height: 4px;
  background-color: rgba(255, 0, 140, 0.7);
}

.p6 {
  left: 40%;
  top: 95%;
  animation-duration: 19s;
  animation-delay: 7s;
  width: 2px;
  height: 2px;
}

@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scale(0);
    opacity: 0;
  }
}

.team-section {
  padding: 100px 0;
  background-color: #070713;
  position: relative;
}

/* Enhanced grid background with subtle animation */
.tech-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 195, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.2;
  z-index: 1;
  animation: grid-pulse 10s infinite alternate;
}

@keyframes grid-pulse {
  0% {
    opacity: 0.1;
    background-size: 50px 50px;
  }
  100% {
    opacity: 0.3;
    background-size: 55px 55px;
  }
}

.team-card-container {
  margin-bottom: 40px;
  perspective: 1000px;
}

.team-card {
  width: 100%;
  height: 350px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  position: relative;
}

.team-card-container:hover .team-card {
  transform: rotateY(180deg);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border: 1px solid rgba(0, 195, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.card-back {
  transform: rotateY(180deg);
  justify-content: center;
  text-align: center;
}

/* Enhanced card with cyberpunk scan line effect */
.card-front::before,
.card-back::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, rgba(0, 195, 255, 0.03) 50%);
  background-size: 100% 4px;
  z-index: 0;
  pointer-events: none;
}

.avatar-container {
  position: relative;
  margin-bottom: 20px;
}

.avatar-frame {
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border: 2px solid rgba(0, 195, 255, 0.5);
  border-radius: 50%;
  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.tech-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.avatar-container:hover .tech-glow {
  opacity: 1;
}

.card-front h3 {
  font-size: 1.6rem;
  margin-bottom: 5px;
  color: #fff;
}

.position {
  color: #00c3ff;
  font-size: 1rem;
  margin-bottom: 15px;
}

.card-connector {
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
  margin-top: auto;
}

.bio {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.tech-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: rgba(0, 195, 255, 0.5);
}

.top-left {
  top: 10px;
  left: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.top-right {
  top: 10px;
  right: 10px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.card-shadow {
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 10px;
  background: rgba(0, 195, 255, 0.2);
  filter: blur(10px);
  border-radius: 50%;
  z-index: -1;
}

.faq-section {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
  overflow: hidden;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Enhanced collapse with cyberpunk styling */
.cyber-collapse {
  --el-collapse-header-height: 60px;
  --el-collapse-header-bg-color: #0c0c24;
  --el-collapse-header-text-color: white;
  --el-collapse-content-bg-color: #0f0f2c;
  --el-collapse-content-text-color: #a9c2ff;
  border: 1px solid rgba(0, 195, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.cyber-collapse::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: linear-gradient(
    45deg,
    rgba(170, 0, 255, 0.2),
    rgba(0, 195, 255, 0.2),
    rgba(170, 0, 255, 0.2)
  );
  background-size: 300% 300%;
  animation: border-shift 8s linear infinite;
  z-index: -1;
  border-radius: 12px;
}

@keyframes border-shift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 300%;
  }
}

:deep(.el-collapse-item__header) {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-bottom: 1px solid rgba(0, 195, 255, 0.2);
  padding: 0 20px;
  font-weight: 600;
  position: relative;
}

:deep(.el-collapse-item__content) {
  padding: 20px;
}

.faq-answer {
  display: flex;
  gap: 15px;
}

.answer-marker {
  color: #00c3ff;
  font-weight: 700;
  font-size: 1.2rem;
}

.faq-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tech-circuit {
  position: absolute;
  right: 5%;
  top: 20%;
  width: 300px;
  height: 500px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="500" viewBox="0 0 300 500"><path fill="none" stroke="rgba(0, 195, 255, 0.15)" stroke-width="2" d="M10,10 L50,10 L50,50 L100,50 L100,100 L150,100 L150,150 L200,150 L200,200 L250,200 L250,250 L200,250 L200,300 L150,300 L150,350 L100,350 L100,400 L50,400 L50,450 Z"/></svg>');
  background-repeat: no-repeat;
  opacity: 0.5;
  animation: flicker 5s infinite alternate;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.2;
  }
}

.contact-section {
  padding: 100px 0;
  background-color: #070713;
  position: relative;
  overflow: hidden;
}

/* Added data stream animation in contact section */
.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, transparent 0%, rgba(0, 195, 255, 0.03) 50%, transparent 100%);
  background-size: 100% 20px;
  animation: data-stream 10s linear infinite;
  z-index: 1;
}

@keyframes data-stream {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.info-card,
.form-card {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  border: 1px solid rgba(0, 195, 255, 0.2);
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Added digital noise overlay to cards */
.info-card::after,
.form-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="10" y="10" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="50" y="30" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="90" y="60" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="40" y="80" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="120" y="90" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="160" y="20" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="110" y="140" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="180" y="160" /><rect width="1" height="1" fill="rgba(255,255,255,0.02)" x="20" y="170" /></svg>');
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.info-card h3,
.form-card h3 {
  font-size: 1.8rem;
  margin-bottom: 25px;
  color: #fff;
  position: relative;
  padding-bottom: 15px;
}

.info-card h3::after,
.form-card h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: #00c3ff;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.info-list li {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.info-list li .el-icon {
  color: #00c3ff;
  font-size: 1.2rem;
}

.social-media h4 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #fff;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.cyber-button {
  --el-button-bg-color: transparent;
  --el-button-border-color: rgba(0, 195, 255, 0.5);
  --el-button-hover-bg-color: rgba(0, 195, 255, 0.1);
  --el-button-hover-border-color: rgba(0, 195, 255, 0.8);
  --el-button-text-color: #00c3ff;
  --el-button-hover-text-color: #fff;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.2);
  transition: all 0.3s;
}

.cyber-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.4);
}

.corner-decor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: rgba(0, 195, 255, 0.5);
}

.cyber-input {
  --el-input-bg-color: rgba(15, 15, 40, 0.8);
  --el-input-border-color: rgba(0, 195, 255, 0.2);
  --el-input-hover-border-color: rgba(0, 195, 255, 0.5);
  --el-input-focus-border-color: rgba(0, 195, 255, 0.8);
  --el-input-text-color: #fff;
  border-radius: 6px;
  margin-bottom: 10px;
}

.submit-button {
  background: linear-gradient(45deg, #0088ff, #00c3ff);
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 195, 255, 0.3);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 195, 255, 0.5);
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-glow {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center, rgba(0, 195, 255, 0.2), transparent 70%);
  border-radius: 50%;
}

.contact-bg-circuit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="800" viewBox="0 0 1440 800"><path fill="none" stroke="rgba(0, 195, 255, 0.05)" stroke-width="2" d="M-100,200 L200,200 L200,400 L400,400 L400,600 L600,600 L600,800 M1540,600 L1240,600 L1240,400 L1040,400 L1040,200 L840,200 L840,0 M-100,500 L100,500 L100,700 L300,700 M1540,300 L1340,300 L1340,100 L1140,100"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
  z-index: 1;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .vr-mega-title {
    font-size: 2.5rem;
  }

  .mission-stats {
    flex-direction: column;
    gap: 20px;
  }

  .card-front,
  .card-back {
    padding: 20px;
  }

  .contact-section .el-col {
    margin-bottom: 30px;
  }
}
</style>
